<template>
  <div id="app">
    <!-- 动态显示导航栏 -->
    <nav v-if="showNavbar">
      <!-- 导航链接 -->
      <div class="nav-links">
        <router-link to="/home">首页</router-link>
        <router-link to="/goods">商品列表</router-link>
        <router-link to="/user-management" v-if="user && user.role === 'admin'">用户管理</router-link>
        <router-link to="/report-management">报表管理</router-link>
        <router-link to="/sales/orders">销售订单列表</router-link>
        <router-link to="/warehouse-overview">仓库概览</router-link>
        <router-link to="/report">统计报表</router-link>
        <router-link to="/customers">客户列表</router-link>
      </div>

      <div class="alert-icon">
        <router-link to="/inventory-alerts" class="alert-icon">
          <img src="@/img/alarm-clock.png" alt="库存预警" class="alarm-clock-img">
          <span class="alert-badge" v-if="unseenAlerts > 0">{{ unseenAlerts }}</span>
        </router-link>
      </div>

      <!-- 用户信息显示 -->
      <div v-if="user" class="user-info">
        <div>
          <span>欢迎，{{ user.username }}</span>
          <span v-if="user.role">角色：{{ user.role }}</span>
          <button @click="handleLogout">退出登录</button>
        </div>
      </div>
    </nav>

    <!-- 路由视图：显示当前路由对应的组件 -->
    <router-view @userLoggedIn="handleUserLoggedIn"></router-view>
  </div>
</template>

<script>
import {getInventoryAlertsCount} from '@/api/inventory'

export default {
  name: 'App',
  data() {
    return {
      user: null, // 用于存储用户信息
      unseenAlerts: 0,
    };
  },
  computed: {
    // 计算属性：判断是否显示导航栏
    showNavbar() {
      // 如果当前路由是登录或注册页面，返回 false
      return this.$route.path !== '/login' && this.$route.path !== '/register';
    },
  },
  methods: {
    handleLogout() {
      // 清除用户信息
      this.user = null;
      localStorage.removeItem('user');
      // 跳转到登录页面
      this.$router.push('/login');
    },
    handleUserLoggedIn(user) {
      // 更新用户信息
      this.user = user;
    },
    async fetchUnseenAlerts() {
      try {
        // 调用 API 获取预警数量
        const response = await getInventoryAlertsCount();
        this.unseenAlerts = response.data.count;
      } catch (error) {
        console.error('获取预警数量失败:', error);
      }
    },
  },
  created() {
    // 在组件创建时，从本地存储或其他地方获取用户信息
    this.user = JSON.parse(localStorage.getItem('user')) || null;
    this.fetchUnseenAlerts();
  },
};
</script>

<style>
/* 设置全局字体和基本样式 */
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

/* 导航栏样式 */
nav {
  margin-bottom: 20px;
  padding: 10px;
  background-color: #f8f8f8;
  border-bottom: 1px solid #ddd;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 导航链接样式 */
.nav-links {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex: 1; /* 占满剩余空间 */
}

.nav-links a {
  margin: 0 5px;
  text-decoration: none;
  color: #42b983;
  font-weight: 500;
  font-size: 14px;
}

/* 被激活的路由链接样式 */
.nav-links a.router-link-exact-active {
  color: #2c3e50;
  font-weight: bold;
  text-decoration: underline;
}

/* 用户信息样式 */
.user-info {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  background-color: #f8f8f8;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
  margin-left: 20px;
}

.user-info span {
  font-weight: 500;
  color: #42b983;
}

.user-info button {
  margin-left: 10px;
  font-size: 12px;
  background-color: #42b983;
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 5px 10px;
  cursor: pointer;
}

.user-info button:hover {
  background-color: #3d9c7d;
}

.alert-icon {
  cursor: pointer;
  margin-top: 5px;
  display: inline-block;
  position: relative; /* 添加这行 */
}

.alarm-clock-img {
  width: 24px;
  height: 24px;
}

.alert-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  z-index: 100; /* 添加这行 */
  background-color: #ff5252;
  color: white;
  font-size: 10px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translate(50%, -50%);
}

/* 响应式设计考虑 */
@media (max-width: 600px) {
  .nav-links a {
    display: block;
    margin: 5px 0;
  }
}
</style>